@extends('layouts.mobile')

@section('title', '我的订单')

@section('content')
    <div class="bought">
        <ul class="order-status-tabs">
            <li :class="{active:tradeStatus==0}" v-on:click="changeStatus(0)">全部</li>
            <li :class="{active:tradeStatus==1}" v-on:click="changeStatus(1)">待付款</li>
            <li :class="{active:tradeStatus==2}" v-on:click="changeStatus(2)">待发货</li>
            <li :class="{active:tradeStatus==3}" v-on:click="changeStatus(3)">待收货</li>
            <li :class="{active:tradeStatus==4}" v-on:click="changeStatus(4)">交易完成</li>
            <li :class="{active:tradeStatus==5}" v-on:click="changeStatus(5)">退款中</li>
        </ul>
        <div class="order-item" v-for="order in orders">
            <div class="shop" v-on:click="viewShop(order)">
                <div class="iconfont icon-shop"></div>
                <div class="shop-name">@{{ order.shop_name }}</div>
                <div class="trade-status">@{{ order.tradeStatusText }}</div>
            </div>
            <div class="items" v-on:click="viewOrder(order)">
                <div class="item" v-for="item in order.items">
                    <div class="image bg-cover" :style="{'background-image':'url('+item.thumb+')'}"></div>
                    <div class="content">
                        <h3>@{{ item.title }}</h3>
                    </div>
                    <div class="right">
                        <p>￥@{{ item.price }}</p>
                        <p>x@{{ item.quantity }}</p>
                    </div>
                </div>
            </div>
            <div class="simple">共计10件商品 合计:@{{ order.order_fee }} (含运费:@{{ order.shipping_fee }})</div>
            <div class="bottom">
                <div class="flex"></div>
                <div class="action-btn" v-if="order.trade_status==1" v-on:click="cancelOrder(order)">取消订单</div>
                <div class="action-btn" v-if="order.trade_status==1" v-on:click="viewOrder(order)">支付</div>
                <div class="action-btn" v-if="order.trade_status==2">提醒卖家发货</div>
                <div class="action-btn" v-if="order.trade_status==3">确认收货</div>
                <div class="action-btn" v-if="order.trade_status==4">评价卖家</div>
            </div>
        </div>
    </div>
@stop

@section('foot')
    <script type="text/javascript">
        (function () {
            var offset = 0;
            var isLoading = false;
            var loadMoreAble = false;
            var loadDatasource = function (tradeStatus, callback) {
                isLoading = true;
                $.ajax({
                    url:'/mobile/trade/bought/getjson',
                    data:{offset:offset, count:10, tradeStatus:tradeStatus},
                    success:function (response) {
                        isLoading = false;
                        loadMoreAble = response.orders.length === 10;
                        if (callback) callback(response);
                    }
                });
            };
            var vm = new Vue({
                el:'#app',
                data:{
                    orders:[],
                    tradeStatus:'{{$tradeStatus}}'
                },
                mounted:function () {
                    var self = this;
                    loadDatasource('{{$tradeStatus}}',function (response) {
                        vm.orders = vm.orders.concat(response.orders);
                    });
                },
                methods:{
                    viewShop:function (order) {
                        window.location.href = '/mobile/shop/viewshop/'+order.shop_id+'.html';
                    },
                    viewOrder:function (order) {
                        window.location.href = '/mobile/trade/detail?order_id='+order.order_id;
                    },
                    changeStatus:function (tradeStatus) {
                        offset = 0;
                        vm.tradeStatus = tradeStatus;
                        loadDatasource(tradeStatus, function (response) {
                            vm.orders = response.orders;
                        });
                    },
                    cancelOrder:function (order) {
                        if (confirm('确认要取消订单吗?')){
                            $.ajax({
                                url:'/mobile/trade/close_order',
                                data:{order_id:order.order_id},
                                success:function (response) {
                                    DSXUtil.reFresh();
                                }
                            });
                        }
                    }
                }
            });
            onDocumentReachBottom(function () {
                if (isLoading) return;
                if (!loadMoreAble) return;
                offset+= 10;
                loadDatasource(function (response) {
                    vm.orders = vm.orders.concat(response.orders);
                });
            });
        })();
    </script>
@stop
